<template>
  <div class="page-drawer">
    <el-drawer
      title=""
      v-model="drawer"
      :direction="direction"
      :destroy-on-close="false"
      :modal-append-to-body="false"
      :before-close="beforeClose"
      header-class="headerClass"
      body-class="bodyclass"
      size="650px"
      @close="onClose"
    >
      <div class="page-drawer-box">
        <div class="page-drawer-content">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            :label-position="labelPosition"
          >
            <el-form-item label=" ">
              <div
                class="page-drawer-footer flex-end flex-row"
                style="width: 100%"
              >
                <el-button type="primary" @click="setSavePost">保存</el-button>
              </div>
            </el-form-item>
            <el-form-item label="职位类型" prop="job_cate">
              <el-radio-group v-model="ruleForm.job_cate" size="default">
                <el-radio-button label="社招" value="社招" />
                <el-radio-button label="应届生" value="应届生" />
                <el-radio-button label="实习生" value="实习生" />
                <el-radio-button label="兼职" value="兼职" />
              </el-radio-group>
            </el-form-item>

            <el-form-item label="职位名称" prop="job_name">
              <div class="w-600">
                <el-input
                  v-model="ruleForm.job_name"
                  placeholder="请输入职位名称"
                />
              </div>
            </el-form-item>

            <el-form-item label="职位关键词" prop="name">
              <div>
                <pk-keywords
                  :job_name="ruleForm.job_name"
                  :keyword_list="ruleForm.keywords"
                  v-model="ruleForm.keywords"
                  placeholder="请输入职位名称"
                  size="default"
                  v-if="show"
                ></pk-keywords>
              </div>
            </el-form-item>

            <el-form-item label="职位描述" prop="jd">
              <div class="flexRow">
                <div class="w-600">
                  <parkTextarea
                    v-model="ruleForm.jd"
                    :rows="14"
                    :disabled="ailoading"
                    :placeholder="placeholder"
                  ></parkTextarea>
                </div>
                <div class="ml-12 page-drawer-aiabsolute">
                  <pk-button
                    :disabled="disabled"
                    @click="setAISave"
                    :loading="ailoading"
                    size="small"
                  >
                    <span class="pk-ditchadd-searchicon">AI生成</span>
                  </pk-button>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="薪资范围" prop="salary">
              <div>
                <div>
                  <el-radio-group v-model="ruleForm.salary_cycle">
                    <el-radio value="时薪">时薪</el-radio>
                    <el-radio value="日薪">日薪</el-radio>
                    <el-radio value="周薪">周薪</el-radio>
                    <el-radio value="月薪">月薪</el-radio>
                    <el-radio value="年薪">年薪</el-radio>
                  </el-radio-group>
                </div>
                <div class="flexRow">
                  <div class="flexRow">
                    <div>
                      <el-input-number
                        v-model="ruleForm.salary_start"
                        :precision="2"
                        :step="0.1"
                        :max="10000000"
                        controls-position="right"
                      ></el-input-number>
                      <!-- <el-input v-model="ruleForm.salary_start" style="width: 100px" placeholder="请输入" /> -->
                    </div>
                    <div class="ml-8 mr-8">至</div>
                    <div>
                      <el-input-number
                        v-model="ruleForm.salary_close"
                        :precision="2"
                        :step="0.1"
                        :max="10000000"
                        controls-position="right"
                      ></el-input-number>
                      <!-- <el-input v-model="ruleForm.salary_close" style="width: 100px" placeholder="请输入" /> -->
                    </div>
                  </div>
                  <div class="ml-12">
                    <el-select
                      v-model="ruleForm.quantity"
                      placeholder="数量级"
                      style="width: 120px"
                      @change="onChnage"
                    >
                      <el-option
                        v-for="item in doptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div class="ml-12">
                    <el-select
                      v-model="ruleForm.currency"
                      placeholder="币种"
                      style="width: 120px"
                      @change="onChnage"
                    >
                      <el-option
                        v-for="item in bioptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="工作地点" prop="location">
              <div class="w-600">
                <pk-input v-model="ruleForm.location"></pk-input>
              </div>
            </el-form-item>

            <!-- <el-form-item label="补充条件" prop="name">
                      <template #label>
                        <div class="flex-row align-items-center">
                          <div class="mr-8">补充条件</div>
                          <div >
                            <el-tooltip content="多个语义条件尽量分开添加" placement="top">
                              <div class="flex-row align-items-center"><el-icon><Warning color="#999"/></el-icon></div>
                            </el-tooltip>
                          </div>
                        </div>
                      </template>
                      <div class="flexRow page-drawer-tagbox">
                        <div v-for="(item, index) in ruleForm.conditions" :key="index" class="page-drawer-tag f-13">
                          {{ item }} <span @click="delItem(item)"></span>
                        </div> 
                        <div class="page-drawer-tag f-13 gray-color" @click="dialogTableVisible=true">添加</div>
                      </div> 
                    </el-form-item>  -->
          </el-form>
        </div>
      </div>
    </el-drawer>
    <!-- <el-dialog v-model="dialogTableVisible" width="600" @close="handerColse" :show-close="false">
          <template #title>
            <div  class="flexCol align-items-center">
              <div class="f-14 bold gray-color000">补充条件</div>
              <div class="f-12 gray-color mt-4">补充条件请结合<span class="red-color bold">必须，只能，也可以</span>等表示强烈程度的词语，推荐效果会更好</div>
            </div>
          </template>
          
          <div>
            <el-input v-model="replenish" type="textarea" placeholder="例如:必须是华人，最好生活在美国地区等自然语言描述"></el-input>
          </div>
          <div slot="footer" class="mt-24 flexRow  justify-center align-items-center">
            <el-button @click="setColse" >取 消</el-button>
            <el-button type="primary" @click="addSave" :disabled="!replenish">确 定</el-button>
          </div>
        </el-dialog> -->
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, reactive } from "vue";
import { Warning } from "@element-plus/icons-vue";
import {
  jobManageagiJD,
  jobManageAdd,
  jobManageEdit,
  getCurrencyDropList,
} from "@/api/busapi";
import { recommendEditJob, jobCreate, getDetailInfo, jobEdit } from "@/api/api";
import { getPrice, validateEmail, getYearPrice } from "@/utils/utils";
import parkTextarea from "@/components/pkui/pktextarea/pktextarea.vue";
import pkKeywords from "@/components/pkui/pkkeysword/pkkeysword.vue";
import pkButton from "@/components/pkui/pkbutton/pkbutton.vue";
import pkInput from "@/components/pkui/pkinput/pkinput.vue";
import SEE from '@/utils/customSee'
const drawer = ref(true);
const placeholder = ref(`
    #示例：

 

    #职位描述：

    

    #岗位职责：

    

    #公司背景：

    

    #其他：

  `);
const direction = ref("rtl");
const ruleFormRef = ref();
const disabled = ref(false);
const labelPosition = ref("top");
const ailoading = ref(false);
const dialogTableVisible = ref(false);
const show = ref(false);
const replenish = ref("");
const options = ref([]);
const bioptions = ref([
  {
    labal: "美元",
    value: "美元",
  },
  {
    labal: "欧元",
    value: "欧元",
  },
  {
    labal: "卢比",
    value: "卢比",
  },
  {
    labal: "日元",
    value: "日元",
  },
  {
    labal: "英镑",
    value: "英镑",
  },
  {
    labal: "人民币",
    value: "人民币",
  },
  {
    labal: "港币",
    value: "港币",
  },
  {
    labal: "加元",
    value: "加元",
  },
  {
    labal: "澳元",
    value: "澳元",
  },
  {
    labal: "瑞士法郎",
    value: "瑞士法郎",
  },
]);
const doptions = ref([
  {
    label: "K",
    value: "K",
  },
  {
    label: "W",
    value: "W",
  },
]);
const props = defineProps({
  jobId: {
    type: [String, Number],
    default: "",
  },
  curItem: {
    type: Object,
    default: () => {},
  },
});
const formSize = ref("default");
const ruleForm = ref({
  // is_recommend: false,
  jd: "",
  job_name: "",
  job_cate: null,
  // salary_cate:'月薪',
  salary_cycle: "月薪",
  quantity: null,
  // currency_unit:null,
  keywords: [],
  // conditions: [],
  currency: null,
});

const emits = defineEmits(["onDrawer", "onClose"]);

const onClose = () => {
  emits("onClose");
};

const beforeClose = () => {
  emits("onClose");
};
const handerColse = () => {
  replenish.value = "";
  dialogTableVisible.value = false;
};

const validatePass = (rule, value, callback) => {
  if (!ruleForm.value.salary_start) {
    callback(new Error("请输入金额"));
    return;
  }

  if (!ruleForm.value.quantity) {
    callback(new Error("请输入数量级"));

    return;
  }

  if (!ruleForm.value.salary_close) {
    callback(new Error("请输入金额"));

    return;
  }

  if (!ruleForm.value.currency) {
    callback(new Error("请输入币种"));

    return;
  }

  callback();
};

const setColse = () => {
  replenish.value = "";
  dialogTableVisible.value = false;
};

const rules = reactive({
  job_name: [{ required: true, message: "请输入职位名称", trigger: "blur" }],
  jd: [{ required: true, message: "请输入职位描述", trigger: "blur" }],
  location: [{ required: true, message: "请输入工作地点", trigger: "blur" }],
  job_cate: [{ required: true, message: "请选择职位类型", trigger: "change" }],
  salary: [{ required: true, validator: validatePass, trigger: "blur" }],
});

const addSave = () => {
  dialogTableVisible.value = false;
  ruleForm.value.conditions.push(replenish.value);
  replenish.value = "";
};

const delItem = (e) => {
  ruleForm.value.conditions = ruleForm.value.conditions.filter(
    (item) => item != e
  );
};

const setAISave = () => {

  const newSee = new SEE({
    url: '/bole/agic/generateJD',
    data:{
      job_name: ruleForm.value.job_name,
      keywords: ruleForm.value.keywords,
    }
  })

  newSee.message = (msg) => {
    const data = JSON.parse(msg.data);
    ruleForm.value.jd = ruleForm.value.jd + "" + data.message 
  }
  newSee.close = (msg) => { 
    ruleForm.value.jd = ruleForm.value.jd  
  }




  // ailoading.value = true;
  // jobManageagiJD({
  //   job_name: ruleForm.value.job_name,
  //   keywords: ruleForm.value.keywords,
  // })
  // .then((res) => {
  //   ailoading.value = false;
  //   ruleForm.value.jd = res.data;
  // })
  // .catch(() => {
  //   ailoading.value = false;
  // });
};

const onChnage = () => {
  ruleFormRef.value.validateField("salary");
};

const addPost = (data) => {
  jobCreate({
    ...ruleForm.value,
  }).then((res) => {
    emits("onDrawer");
  });
}

const editPost = (data) => {
  jobEdit({
    ...ruleForm.value,
    job_id: props.curItem.job_id
  }).then((res) => {
    emits("onDrawer");
  });
}

const setSavePost = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      if (props.curItem.job_id) {
        editPost()
      } else {
        addPost()
      }
    }
  });
};

onMounted(() => {
  if (props.curItem?.job_name) {
    getDetailInfo({
      job_id: props.curItem.job_id,
    }).then((res) => {
      ruleForm.value.job_id = res.data.job_id;
      ruleForm.value.job_name = res.data.job_name;
      ruleForm.value.jd = res.data.jd;
      ruleForm.value.salary_cate = res.data.salary_cate;
      ruleForm.value.salary_start = res.data.salary_start;
      ruleForm.value.salary_close = res.data.salary_close;
      ruleForm.value.keywords = res.data.keywords;
      ruleForm.value.quantity = res.data.quantity;
      ruleForm.value.job_cate = res.data.job_cate;
      ruleForm.value.salary_cycle = res.data.salary_cycle;
      ruleForm.value.currency_name = res.data.currency_name;
      ruleForm.value.currency = res.data.currency;
      ruleForm.value.location = res.data.location || "";
      show.value = true;
    });
  } else {
    show.value = true;
  }

  if (ruleForm.value.salary_cate == "月薪") {
    options.value = getPrice();
  } else {
    options.value = getYearPrice();
  }
});
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header {
  padding: 0 !important;
  margin-bottom: 10px !important;
  display: none;
}
::v-deep .el-drawer__body {
  padding: 12px !important;
}
::v-deep .el-form-item__label {
  color: #000 !important;
}

.headerClass {
  padding: 0px !important;
  display: none;
}

.bodyclass {
  padding: 0px !important;
}

.page-drawer {
  &-aiabsolute {
    position: absolute;
    top: -36px;
    right: 12px;
  }
  &-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  &-content {
    flex: 1;
    overflow-y: auto;
  }
  &-footer {
    // display:flex;
    // flex-direction: row;
    // align-items: center;
    // justify-content: center;
    // position: absolute;
    // top:0;
    // right:10px
    margin-top: -12px;
  }
  &-tagbox {
    width: 568px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
  &-tag {
    padding: 0 12px;
    min-height: 24px;
    line-height: 24px;
    border-radius: 12px;
    border: #ddd 1px solid;
    cursor: pointer;
    min-width: 60px;
    text-align: center;
    word-break: break-all;
    margin-bottom: 12px;
    margin-right: 12px;
    position: relative;
    padding-right: 20px;
    color: #606266;
    span {
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      bottom: 0;
      display: flex;
      align-items: center;
      color: #f00;
      background: url("@/assets/image/closeicon.png") center center no-repeat;
      background-size: 14px auto;
      display: inline-block;
    }
  }
}

.pk-ditchadd {
  &-content {
    padding: 20px 12px;
    width: 1000px;
  }
  &-searchicon {
    background: url("@/assets/image/aisearchicon.svg") center left no-repeat;
    padding-left: 24px;
    background-size: 16px auto;
  }
}
</style>
